<template>
	<el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
		<el-tab-pane label="插件列表" name="first">
			<div id="admin" class="container">
				<el-table
					:data="tableData"
					:header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }"
					border
					style="width: 100%"
				>
					<el-table-column prop="title" label="名称" width="120px" />
					<el-table-column prop="name" label="标识" />
					<el-table-column prop="description" label="描述" />
					<el-table-column prop="author" label="作者" />
					<el-table-column prop="version" label="版本" />
					<el-table-column prop="status" label="状态" width="160px">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status == 1" size="small" type="success">已启用</el-tag>
							<el-tag v-else-if="scope.row.status == 2" size="small" type="info">已禁用</el-tag>
							<el-tag v-else size="small" type="info">未安装</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px" fixed="right">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 3">
								<el-button class="edit" size="mini" @click="goInstall(scope.row)">安装</el-button>
							</span>
							<span v-else>
								<el-button
									v-if="scope.row.status == 2"
									class="edit"
									size="mini"
									@click="editStatus(scope.row, 1)"
									>启用</el-button
								>
								<el-button
									v-if="scope.row.status == 1"
									class="dele"
									size="mini"
									@click="editStatus(scope.row, 2)"
									>禁用</el-button
								>
								<el-button class="dele" size="mini" @click="goUninstall(scope.row)">卸载</el-button>
							</span>
						</template>
					</el-table-column>
				</el-table>
				<BouncedDialog
					:title="adminForm.id ? '编辑管理员' : '添加管理员'"
					:dialog-show.sync="dialogAdmin"
					:width="50"
					class="dialog"
				>
					<el-form ref="adminForm" :model="adminForm" inline :rules="adminRules" label-width="70px">
						<el-form-item label="账号：" prop="account">
							<el-input v-model="adminForm.account" placeholder="请依照这种格式XXX@XXX.COM" />
						</el-form-item>
						<el-form-item label="密码：" :prop="adminForm.id ? '' : 'password'">
							<el-input v-model="adminForm.password" type="password" />
						</el-form-item>
						<el-form-item label="昵称：" prop="name">
							<el-input v-model="adminForm.name" />
						</el-form-item>
						<el-form-item label="角色：" prop="role">
							<el-select v-model="adminForm.role" multiple placeholder="请选择" style="width: 100%">
								<el-option
									v-for="item in options"
									:key="item.id"
									:label="item.title"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="状态：">
							<el-select v-model="adminForm.status" placeholder="请选择">
								<el-option label="启用" :value="1" />
								<el-option label="禁用" :value="2" />
							</el-select>
						</el-form-item>
						<div class="btn">
							<el-button @click="dialogAdmin = false">取 消</el-button>
							<el-button type="primary" @click="submitAdmin()">确 定</el-button>
						</div>
					</el-form>
				</BouncedDialog>
				<!-- <el-pagination
					:current-page="page.currentPage"
					:page-sizes="page.pageSizes"
					:page-size="page.size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
					:hide-on-single-page="page.total < page.size ? true : false"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/> -->
			</div>
		</el-tab-pane>
		<el-tab-pane label="插件市场" name="second">插件市场</el-tab-pane>
		<!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
		<!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
	</el-tabs>
</template>
<script>
import pluginApi from '@/api/plugin.js'
import adminApi from '@/api/admin.js'
import websiteApi from '@/api/website.js'
// import rolesApi from '@/api/roles'
var token = localStorage.getItem('token')
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			activeName: 'first',
			// myHeaders: { Authorization: token },
			// imageUrl: '',
			tableData: [],
			searchForm: {},
			dialogAdmin: false,
			options: [], // 角色
			name: '', // 暂存管理员姓名
			adminForm: {
				account: '',
				password: '',
				name: '',
				role: [],
				id: '',
			}, // 新增管理员表单
			adminRules: {
				account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
				role: [{ required: true, message: '请选择角色', trigger: 'change' }],
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
			val: {},
		}
	},
	created() {
		this.getList()
		// this.getwebList()
	},
	updated() {},
	methods: {
		handleClick(tab, event) {
			if (tab.name == 'first') {
				this.getList()
			}
			console.log(tab, event)
		},
		goInstall(row) {
			console.log('安装插件！')
			this.val.name = row.name
			pluginApi.install(this.val).then((res) => {
				if (res.code == 0) {
					if (row.has_admin == 1) {
						// 有后台菜单，重新获取菜单
						adminApi.getMenuAndUpdateAuth().then((res) => {
							localStorage.setItem('navMenu', JSON.stringify(res.data))
							this.$parent.$parent.$children.forEach(function (value, index) {
								if (value.initMenu) value.initMenu()
							})
							// window.location.reload()
						})
					}
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		goUninstall(row) {
			console.log('卸载插件！')
			this.$confirm('此操作将永久删除此插件的相关数据, 是否继续?', '卸载插件！', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.val.name = row.name
					pluginApi.uninstall(this.val).then((res) => {
						if (res.code == 0) {
							if (row.has_admin == 1) {
								// 有后台菜单，重新获取菜单
								adminApi.getMenuAndUpdateAuth().then((res) => {
									localStorage.setItem('navMenu', JSON.stringify(res.data))
									this.$parent.$parent.$children.forEach(function (value, index) {
										if (value.initMenu) value.initMenu()
									})

									// window.location.reload()
								})
							}
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消卸载',
					})
				})
		},
		editStatus(row, status = 1) {
			pluginApi.editStatus({ name: row.name, status: status }).then((res) => {
				if (res.code == 0) {
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// getwebList() {
		//   this.val.page = this.page.currentPage
		//   this.val.limit = this.page.size
		//   websiteApi.webList(this.val).then(res => {
		//   })
		// },
		// 获取插件列表
		getList() {
			pluginApi.pluginList(this.val).then((res) => {
				this.tableData = res.data
			})
		},

		// 提交
		submitAdmin() {
			this.$refs.adminForm.validate((valid) => {
				if (valid) {
					if (!this.adminForm.id) {
						adminApi
							.adminSave({
								...this.adminForm,
							})
							.then((res) => {
								if (res.code === 0) {
									this.$message.success(res.msg)
									this.dialogAdmin = false
									this.getList()
								} else {
									this.$message.error(res.msg)
								}
							})
					} else {
						adminApi.adminUpdate({ ...this.adminForm }).then((res) => {
							if (res.code === 0) {
								this.$message.success(res.msg)
								this.dialogAdmin = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.warning('请填写必要信息')
				}
			})
		},

		// 搜索
		search() {
			this.$refs.searchForm.validate((valid) => {
				this.page.currentPage = 1
				this.getList()
			})
		},

		// 重置搜索框
		reset(searchForm) {
			this.searchForm = {
				account: '',
			}
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#admin {
	.el-form-item {
		width: 100%;
	}
	.el-form-item__content {
		width: calc(100% - 80px);
		.el-select {
			width: calc(100%);
		}
	}
}
</style>
<style lang="scss" scoped>
.tabs {
	padding: 15px 10px;
}

#admin {
	background-color: #fff;
}

.el-table {
	margin-bottom: 20px;
}
.search {
	background-color: #fff;
	padding: 15px 10px;
	margin-bottom: 10px;
	.el-form-item {
		margin-bottom: 0;
	}
	.el-button {
		font-size: 14px;
	}
}
.btn {
	text-align: center;
}
</style>
